<template>

  <div>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>编辑内容</el-breadcrumb-item>
        <el-breadcrumb-item>演员列表</el-breadcrumb-item>
        <el-breadcrumb-item>编辑演员</el-breadcrumb-item>
        <p><br></p>
      </el-breadcrumb>
    </div>
    <div style="text-align: left">

      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" title="编辑电影">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" style="width: 593px"></el-input>
        </el-form-item>
        <el-form-item label="出生年月日" prop="time_length">
          <el-col :span="11">
            <el-date-picker v-model="ruleForm.birthday" placeholder="选择年月日" style="width: 100%;"
                            type="date"></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="性别" prop="sex" required>
          <el-col :span="12">
            <template>
              <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
              <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
            </template>
          </el-col>
        </el-form-item>

        <el-form-item label="区域" prop="regionsStr">
          <el-checkbox-group v-model="selectedRegionList">

            <el-checkbox v-for="region in allRegionList" :id="region.id + ''" :label="region.id" name="categories">
              {{ region.name }}
            </el-checkbox>

          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="演员简介" prop="description">
          <el-col :span="11">
            <el-input v-model="ruleForm.description" rows="5" si type="textarea"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="照片" prop="pic">
          <el-upload
              ref="upload"
              :auto-upload="false"
              :file-list="fileList"
              :limit="1"
              :multiple="false"
              :on-change="fileChange"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img v-if="ruleForm.pic !== ''" :src="'data:image/png;base64,' + ruleForm.pic"
                   alt="" class="el-upload-list__item-thumbnail">

              <img v-else :src="file.url"
                   alt="" class="el-upload-list__item-thumbnail">
              <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>

                  <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                  </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="" width="100%">
          </el-dialog>
        </el-form-item>
        <el-form-item style="width: 600px; text-align: center">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Actor",
  data() {
    return {
      disabled: false,
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [{url: '', name: ''}],
      allRegionList: [], // 用来存储所有的区域
      selectedRegionList: [], // 用来存储选中的区域
      ruleForm: {
        id: '',
        sex: '男',
        name: '',
        birthday: '',
        description: '',
        regionsStr: [], // 用来存储在添加演员页面上选中的区域
        pic: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        /*birthday: [
          {type: 'date',required: true, message: '请输入出生年月日', trigger: 'blur'}
        ],*/
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        regions: [
          {type: 'array', required: true, message: '请至少选择一个区域', trigger: 'change'}
        ],
        description: [
          {required: true, message: '请填写简介', trigger: 'blur'}
        ]

      }
    }
  },
  mounted() {
    this.$http.get("/api/actor/editActor?actorId=" + this.$route.query.actorId)
        .then(res => {
          //把区域列表赋值给 data中定义的 regionList,便于在页面上展示
          this.allRegionList = res.data.regionList
          // 把演员的数据赋值给data中的ruleForm
          this.ruleForm.id = res.data.actor.id;
          this.ruleForm.name = res.data.actor.name;
          this.ruleForm.birthday = new Date(res.data.actor.birthday);
          this.ruleForm.pic = res.data.actor.pic;
          console.log("性别======" + res.data.actor.sex);
          this.ruleForm.sex = res.data.actor.sex;
          this.ruleForm.description = res.data.actor.description;
          // 把已经选中的区域存到data中的regionList中
          let regions = res.data.actor.regions;
          for (let i = 0; i < regions.length; i++) {
            this.selectedRegionList[i] = regions[i].id;
          }
        }).catch(res => {
      this.$message.error("获取区域列表失败")
    })
  },
  methods: {
    handleRemove: function (file, fileList) {
      this.ruleForm.pic = '';
      this.fileList = fileList;
    },
    fileChange: function (file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview: function (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    cancel(){
      this.$router.push("/actorList");
    },
    editActor() {
      let dataForm = new FormData;
      if (this.fileList.length > 0) {
        dataForm.append("file", this.fileList[0].raw)
      } else {
        dataForm.append("file", null)
      }
      dataForm.append("actor", JSON.stringify(this.ruleForm))
      this.$http.post("/api/actor/update", dataForm, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(res => {
            this.$message.success("更新成功")
          })
          .catch(res => {
            this.$message.error("更新演员信息失败")
            return false;
          })
      return true;
    },
    submitForm(formName) {
      let self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.regionsStr = this.selectedRegionList;
          if (!this.editActor()) {
            return false;
          }
          self.dialogVisible = false;
          // 更新成功后,跳转到电影列表页面
          this.$router.push("/actorList")

        } else {
          console.log('保存失败!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
#el-input {
  width: 400px;
}

.template_title {
  line-height: 40px;
  width: 500px;
  text-align: center;
  height: 60px;
  margin-top: 0px;
  font-size: 24px;
  color: #226655;
}
</style>